<template>
  <chartTemplate ref="chartTemplate" :option="option"></chartTemplate>
</template>
<script>
import { mapState } from 'vuex'
import chartTemplate from '@/assets/js/common/chartTemplatePlugin/chartTemplate'
export default {
  name: 'homeLeftCenter',
  data() {
    return {
      yAxis: [],
      seriesData: [],
      legend: [],
      barColor: [
        ['rgba(9,109,217,1)', 'rgba(9,109,217,0)'],
        ['rgba(217,92,9,1)', 'rgba(217,92,9,0)']
      ],
      lineColor: ['#24dcf7', '#d95c09'],
      tooltipIndex: -1
    }
  },
  props: {
    params: {
      type: Array,
      default: () => []
    }
  },
  mounted() {},
  computed: {
    ...mapState(['dataSet']),
    option() {
      let option = this.getOption()
      return option
    }
  },
  watch: {
    params: {
      handler: function (v, v1) {
        this.init()
      }
    }
  },
  methods: {
    init() {
      this.handleData()
      let tl = new TimelineMax({})
      tl.addLabel('start').add(this.$refs.chartTemplate.init(), 'start')
      return tl
    },
    getOption() {
      let option = {
        tooltip: {
          backgroundColor: 'rgba(17,95,234,0)',
          trigger: 'item',
          position: 'top',
          padding: 0,
          textStyle: {
            color: '#fff'
          },
          className: 'scatter-hover-bg',
          formatter: (params) => {
            let dom = `
              <div class="H_Regular" style='padding: 10px 0 5px 10px;'>${params.data[2]}</div>`
            dom += `<div  class="H_Regular" style='padding-left: 10px;line-height: 20px;margin-top: 5px;'>企业数量：<span style="margin-right: 3px;font-family: 'D-DIN-Bold';">${this.fomatterNum(
              params.data[0]
            )}</span></div> 
             <div  class="H_Regular"  style='padding-left: 10px;line-height: 20px;margin-top: 5px;'>增速：<span style="margin-right: 3px;font-family: 'D-DIN-Bold';">${
               params.data[1]
             }%</span></div>`
            return dom
          }
        },
        grid: {
          bottom: 50,
          top: 50,
          right: 10
        },
        legend: {
          right: 0,
          top: 20,
          itemWidth: 15,
          itemHeight: 10,
          textStyle: {
            color: '#f0f0f0'
          },
          data: this.legend
        },
        xAxis: {
          type: 'category',
          position: 'end',
          axisLine: {
            show: false
          },
          axisTick: { show: false },
          axisLabel: { show: false },
          data: this.xData
        },
        yAxis: {
          type: 'value',
          name: '',
          nameTextStyle: {
            color: 'rgba(240,240,240,.7)',
            width: 20,
            align: 'right',
            padding: [0, 20, 0, 0]
          },
          max: 100,
          axisLine: {
            show: false
          },
          axisTick: { show: false },
          axisLabel: {
            fontSize: 12,
            color: 'rgba(240,240,240,.7)',
            formatter: '{value}%'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,225,255,.2)'
            }
          }
        },
        series: [
          {
            type: 'scatter',
            symbolSize: function (data) {
              return data[0] / 5
            },
            itemStyle: {
              color: new this.$echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                {
                  offset: 0,
                  color: 'rgba(50, 76,237,0)'
                },
                {
                  offset: 1,
                  color: 'rgba(50, 76,237,1)'
                }
              ])
            },
            data: this.seriesData
          }
        ]
      }
      return option
    },
    handleData() {
      let arr = [...this.params],
        seriesData = []
      for (let i = 0; i < arr.length; i++) {
        let objArr = []
        objArr.push(arr[i].value, arr[i].ratio, arr[i].name)
        seriesData.push(objArr)
      }

      this.seriesData = seriesData
    },
    fomatterNum(num) {
      if (typeof num === 'number') {
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      } else {
        return '-'
      }
    }
  },
  components: { chartTemplate }
}
</script>
<style lang="scss">
.scatter-hover-bg {
  position: absolute;
  width: 200px;
  height: 100px;
  background: linear-gradient(
    to right,
    rgba(5, 37, 95, 0.8),
    rgba(5, 37, 95, 0)
  );
  border-width: 0 !important;
  border-left: 2px solid rgba(50, 76, 237, 1) !important;
  display: none;
  border-radius: 0 !important;
  box-shadow: rgb(0 0 0 / 0%) 1px 2px 10px !important;
}
</style>
